<template>
    <view style="display: flex;flex-direction: column;">
        <view class="function_area">
            <view  style="width: 96rpx;text-align: center;margin: 20rpx;" v-for="(item,index) in navList" :key="index" :class="{'active':current==item.id}" @click="navChange(item.id)">
                <image :src="item.img_url" style="width: 96rpx;height: 96rpx;" />
                <view style="font-size: 22rpx;">{{item.name}}</view>
            </view>
        </view>
        <view class="classify-top"></view>
        <view class="classify-body">
            <view class="classify-left">
                <view class="nav-item" v-for="(item2,index) in classifyList" :key="index" :class="{'active':selectClassifyId==item2.id}" @click="childChange(item2.id)">{{item2.name}}</view>
            </view>
            <view class="classify-right">
<!--                <view class="classify-right-classify">-->
<!--                    <view style="width: auto;color:#7d7c7c;background-color:#e8e7e7;border-radius: 5px;padding: 0 2px;margin-left:5px;">分类1</view>-->
<!--                    <view style="width: auto;color:#7d7c7c;background-color:#e8e7e7;border-radius: 5px;padding: 0 2px;margin-left:5px;">分类1</view>-->
<!--                    <view style="width: auto;color:#7d7c7c;background-color:#e8e7e7;border-radius: 5px;padding: 0 2px;margin-left:5px;">分类1</view>-->
<!--                    <view style="width: auto;color:#7d7c7c;background-color:#e8e7e7;border-radius: 5px;padding: 0 2px;margin-left:5px;">分类1分类1</view>-->
<!--                    <view style="width: auto;color:#7d7c7c;background-color:#e8e7e7;border-radius: 5px;padding: 0 2px;margin-left:5px;">分类1分类1</view>-->
<!--                    <view style="width: auto;color:#7d7c7c;background-color:#e8e7e7;border-radius: 5px;padding: 0 2px;margin-left:5px;">分类1分类1</view>-->
<!--                    <view style="width: auto;color:#7d7c7c;background-color:#e8e7e7;border-radius: 5px;padding: 0 2px;margin-left:5px;">分类1分类1</view>-->
<!--                    <view style="width: auto;color:#7d7c7c;background-color:#e8e7e7;border-radius: 5px;padding: 0 2px;margin-left:5px;">分类1分类1</view>-->
<!--                </view>-->
                <div class="recommend-right">
                    <div class="null" v-if="goodsList.length==0">
                        暂无商品数据~~
                    </div>
                    <div class="recommend-item" style="border-bottom: 1px solid #efeeee;padding: 30rpx" v-for="(item,index) in goodsList" :key="index" @click="toGoodsDetail(item.id)">
                        <div class="item-img">
                            <img :src="item.thumb_Url" mode="aspectFit" style="width: 180rpx;height: 180rpx"/>
                        </div>
                        <div class="item-left" style="margin-left: 10rpx">
                            <div class="item-des" style="line-height: 60rpx;height: 60rpx;font-size: 30rpx">{{item.name}}</div>
                            <div class="item-info" style="font-size: 25rpx">
                                {{item.info==''?item.name:item.info}}
                                <!--          <span>￥{{item.s_price}}</span>-->
                                <!--          <span class="original">￥{{item.m_price}}</span>-->
                            </div>
                            <div class="sale_count" style="margin-top: 20rpx">
                                <div class="price" style="line-height: 60rpx;height: 60rpx;color:red">
                                    ￥{{item.s_price}}
                                </div>
                                <image style="width: 60rpx;height: 60rpx;" @click.stop="getGoodsDetails(item.id)" class="img" src="http://file.rzkeji.com/web/pygxs2020/images/icon/icon-btn-cart.png"/>
                                <div class="img-icon" v-if="item.shop_cart_num>0">{{item.shop_cart_num}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="noMore" v-if="goodsList.length>0" style="text-align: center">
                        没有更多了~~
                    </div>
                </div>
            </view>
        </view>

        <!-- 弹出层 -->
        <div class="mask" v-if="showModal" @click="hideCart"></div>
        <div class="modalDlg" v-if="showModal">
            <div class="modalDlg_top">
                <img :src="goodsDetail.thumb_url" alt="">
                <div class="modalDlg_top_right">
                    <div class="modalDlg_top_right_name">
                        <!-- <span class="modalDlg_top_right_name_tag">海外购</span> -->
                        <span>{{goodsDetail.name}}</span>
                    </div>
                    <div class="cart_price">
                        <span v-if="credit">{{goodsDetail.exchange_integral}}积分</span>
                        <span v-else>￥{{goodsDetail.s_price}}</span>
                        <span>库存：{{goodsDetail.stock}}</span>
                    </div>
                </div>
            </div>
            <div class="modalDlo_center">
                <div class="modalDlo_center_tit" v-if="colorAll.length!=0">规格</div>
                <div class="modalDlo_center_classify">
                    <div
                            v-for="(item,index) of colorAll"
                            :key="index" @click="select_classify(index)"
                            :class="{selectClassify:index==colorIndex}"
                    >
                        {{item}}
                    </div>
                </div>
            </div>
            <div class="modalDlo_bottom">
                <count @numberChange="numberChange" :stock="goodsDetail.stock">
                    <div>购买数量</div>
                </count>
            </div>
            <div class="join_cart" v-if="!buyNow" @click="addCart">加入购物车</div>
            <div class="join_cart" v-else @click="buying">立即购买</div>
        </div>
        <!-- 弹出层结束 -->
    </view>
</template>

<script>
import count from '@/components/count'
export default {
    data() {
        return {
            current: 0,
            navList: [],
            classifyList:[],
            selectSectionId:0,
            selectClassifyId:0,
            selectChildClassifyId:0,
            childClassifyList:[],
            goodsList:[],

            goodsDetail: '',
            classifyIndex: -1,
            classifyId: '',
            id: '',
            num: '',
            showModal: '',
            page:1,
            total:0,

            goods_spu_info: [],
            size: [],
            selectSizes:[],
            sizeAll: [],
            color:[],
            selectColors:[],
            colorAll: [],
            sizeIndex: -1,
            colorIndex: -1,
        }
    },
    components: {
        count
    },
    onLoad(options){
        console.log(options,"options")
        this.selectSectionId = options.section_id
        this.classify_id = options.classify_id
        this.current=options.section_id
        this.selectClassifyId = options.classify_id
        this.getBuyingClassifyList();
    },
    mounted(){

    },
    methods: {
        //跳转商品详情
        toGoodsDetail(id){
            wx.navigateTo({url:'/pages/goodsDetail/goodsDetail?id='+id})
        },
        //获取分类
        async getBuyingClassifyList() {
            let param={section_id:this.selectSectionId,classify_id:this.selectClassifyId}
            let res = await this.$api.getSectionClassifyTwoList(param);
            if(res.data.level == "success"){
                this.navList = res.data.data.sections;
                this.classifyList = res.data.data.classifys;
                this.childClassifyList = res.data.data.child_classifys;
                this.current = res.data.data.section_id;
                this.selectClassifyId = res.data.data.classify_id;

                this.getGoodsList();
                console.log(this.childClassifyList,"this.childClassifyList")
            }else {
                uni.showToast({title:res.data.message,icon:"none"})
            }
        },
        async navChange(index) {
            let param={section_id:index}
            let res = await this.$api.getSectionClassifyTwoList(param);
            if(res.data.level == "success"){
                this.navList = res.data.data.sections;
                this.classifyList = res.data.data.classifys;
                this.childClassifyList = res.data.data.child_classifys;
                this.current = res.data.data.section_id;
                this.selectClassifyId = res.data.data.classify_id;

                this.getGoodsList();
            }else {
                uni.showToast({title:res.data.message,icon:"none"})
            }
        },
        async childChange(id){
            this.selectClassifyId = id;
            let param={classify_id:this.selectClassifyId,classify_two_id:this.selectChildClassifyId}
            let res = await this.$api.getGoodsListByClassifyId(param);
            if(res.data.level == "success"){
                this.goodsList = res.data.data
            }else {
                uni.showToast({title:res.data.message,icon:"none"})
            }
        },
        async getGoodsList() {
            let param={classify_id:this.selectClassifyId,classify_two_id:this.selectChildClassifyId}
            let res = await this.$api.getGoodsListByClassifyId(param);
            if(res.data.level == "success"){
                this.goodsList = res.data.data
            }else {
                uni.showToast({title:res.data.message,icon:"none"})
            }
        },

        //获取商品详情
        async getGoodsDetails(id){
            if (id != this.id){
                this.classifyId = '';
                this.colorIndex = -1;
            }
            let res = await this.$api.getGoodsDetails( {
                goods_id: id,
            })
            if(res.data.level=='success'){
                this.goodsDetail = res.data.data;
                this.id = id;
                this.num=1;
                this.showModal = true;
                this.goods_spu_info = res.data.data.goods_spu_info;
                this.select();
                // wx.hideTabBar();
            }
        },
        select(){
            this.colorAll = [];
            this.size = [];
            this.color = [];
            this.colorIndex = -1;
            this.classifyId = '';
            this.goods_spu_info.forEach(item => {
                if (this.colorAll.indexOf(item.color_spu_name)==-1){
                    this.colorAll.push(item.color_spu_name)
                }
            })
        },
        selectColor(value){
            let color = [];
            // let stock = [];
            this.goods_spu_info.forEach(item => {
                color.push(item.color_spu_name);
            })
            this.color.push(color);
        },
        select_classify(index) {//选择规格
            // this.classifyIndex = index
            // this.classifyId = item.id
            if (this.colorIndex == index){
                this.colorIndex = -1;
                this.classifyId = '';
                this.getGoodsDetails(this.id);
            } else {
                this.colorIndex = index;
            }

            let str = [];
            if (this.colorIndex!=-1){
                this.selectClassifys()
            }
        },
        selectClassifys(){
            this.goods_spu_info.forEach(item => {
                if (item.color_spu_name==this.colorAll[this.colorIndex]){
                    this.$set(this.goodsDetail, 'stock', item.stock)
                    this.$set(this.goodsDetail, 's_price', item.price);
                    this.$set(this.goodsDetail,'thumb_url',item.img_url);
                    this.classifyId = item.id;
                }
            })
        },
        numberChange(num){
            this.num=num
        },

        //添加到购物车
        async addCart(){//添加到购物车
            const _this=this
            if(this.num<=0){
                this.$currency.showToast('购买数量不能为0');
                return
            }else if(this.classifyId==''){
                this.$currency.showToast('先选择规格吧');
                return
            }
            var userToken=uni.getStorageSync('userToken')
            let res=await this.$request.postData('/goods/addShopCart',{
                goods_id:this.id,
                num:this.num,
                user_token:userToken,
                goods_spu_id:this.classifyId
            })
            wx.showLoading()
            if(res.data.level=='success'){
                _this.$currency.showToast('成功加入购物车','success',1500);
                _this.showModal=false;
                wx.showTabBar();
                _this.classifyId = '';
                _this.classifyIndex = -1;
                let num = _this.page;
                for (let i = 0; i< num ; i++){
                    _this.page = i+1;
                    _this.getGoodList()
                }
                wx.hideLoading();
            }else{
                wx.hideLoading({success:function(){
                        _this.$currency.showToast(res.data.message,'none',1500)
                    }});

            }
        },

        hideCart(){
            this.showModal = false;
            this.goodsDetail = '';
            // wx.showTabBar();
        },
    }
}
</script>

<style scoped lang="scss">
    @import "../../common/css/mixin.scss";
    .function_area{
        display: flex;
        justify-content: left;
        flex-wrap: nowrap;
        padding: 24rpx;
        overflow-x: auto;
        position: fixed;
        width: calc(100% - 24rpx);
        background-color: #fff;
        z-index: 999;

        .active{
            color: #f64949;

            image{
               border-radius: 50%;
                border: 1px solid #f64949;
            }
        }
    }

    .classify-top{
        height: 220rpx;
    }

    .classify-body{
        width: 100vw;
        /*max-height: 100vh;*/
        font-size: 14px;
        @include flex(flex-start,flex-start);
        flex-direction: row;
        height: calc(100vh - 220rpx);

        .classify-left{
            width: 25vw;
            color: #737277;
            background-color: #f7f6fb;
            height: calc(100vh - 220rpx);
            overflow-y: auto;
            .nav-item{
                /*width: calc(100% - 3px);*/
                text-align: center;
                height: 120rpx;
                line-height: 120rpx;
                margin-left: 3px;
            }
            .active{
                color: #000000;
                font-weight: bold;
                border-left: 5px solid #f64949;
                margin-left: 0px;
                background-color: #FFFFFF;
            }
        }
        .classify-right{
            height: calc(100vh - 220rpx);
            width: 75vw;
            background: #ffffff;
            overflow-y: auto;
            /*max-height: 100vh;*/
            /*overflow: auto;*/
            .classify-right-classify{
                display: flex;
                flex-direction: row;
                overflow-x:scroll;
                justify-content: left;
                flex-wrap: nowrap;
            }
            .title-icon{
                padding: 20px 20px 0;
                display: flex;
                justify-content: center;
                image{
                    width: 100%;
                    border-radius: 10px;
                }
            }

            .recommend-right {
                /*margin-left: auto;*/
                width: 75vw;
                background: #ffffff;
                min-height: calc(100vh - 110rpx);

                .recommend-item {
                    /*width: calc(75vw - 40rpx);*/
                    padding: 20 rpx;
                    background: #ffffff;
                    @include flex(flex-start);
                    flex-direction: row;
                    border-bottom: 2 rpx solid #eee;

                    .item-img {
                        width: 180rpx;
                        height: 180rpx;
                        margin-right: 20 rpx;
                        border-radius: 8 rpx;
                        overflow: hidden;
                    }

                    .item-left {
                        width: calc(100% - 180rpx);

                        .item-des {
                            height: 60 rpx;
                            line-height: 60 rpx;
                            width: 100%;
                            @include ellipsis(1);
                        }

                        .item-info {
                            height: 40 rpx;
                            line-height: 40 rpx;
                            width: 100%;
                            font-size: 24 rpx;
                            color: #666666;
                            @include ellipsis(1);
                        }

                        .price {
                            font-size: 34 rpx;
                            @include flex(flex-start, flex-end);
                            flex-direction: row;
                            height: 40 rpx;
                            line-height: 40 rpx;
                            /*width: 100%;*/
                            color: #333333;
                            font-weight: bold;

                            .original {
                                font-size: 22 rpx;
                                color: #707070;
                                text-decoration: line-through;
                                padding-left: 20 rpx;
                            }
                        }

                        .sale_count {
                            position: relative;
                            font-size: 24 rpx;
                            color: #b2b2b2;
                            width: 100%;
                            height: 60 rpx;
                            line-height: 60 rpx;
                            @include flex(flex-start, flex-end);

                            .img {
                                margin-left: auto;
                                width: 40 rpx;
                                height: 40 rpx;
                            }

                            .img-icon {
                                position: absolute;
                                bottom: 20 rpx;
                                right: 0;
                                width: 20 rpx;
                                height: 20 rpx;
                                background: #e12317;
                                border-radius: 360 rpx;
                                color: #ffffff;
                                font-size: 18 rpx;
                                text-align: center;
                                line-height: 20 rpx;
                            }
                        }
                    }
                }
            }

        }
    }
    /* .classify-body{
        text-align: center;

        .classify-left{
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            padding: 0rpx 20rpx 20rpx 0;
            color: #808080;
            margin-left: -10rpx;
            margin-top: 20rpx;
        }
        .classify-right{
            margin-top: 20rpx;
        }
    }
    .left-nav-name{
        font-size: 14px;
        color: #9F9F9F;
    }
    .active{
        border-left: 18rpx solid #4CD964;
        color: black;
        font-weight: bold;
    } */
    /* 隐藏滚动条 */
    /deep/.uni-scroll-view ::-webkit-scrollbar {
        /* 隐藏滚动条，但依旧具备可以滚动的功能 */
        display: none;
        width: 0;
        height: 0;
        color: transparent;
        background: transparent;
    }
    /deep/::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        color: transparent;
        background: transparent;
    }

    /* 弹出框 */
    .mask{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: #000;
        z-index: 9000;
        opacity: 0.7;
    }
    .modalDlg{
        width: 100%;
        height:45%;
        position: fixed;
        bottom:0;
        left: 0;
        z-index: 9999;
        background-color: #ffffff;
        color: #000000;
        padding-bottom: 40px;
    }

    .modalDlg_top{
        padding:5px 25px 5px 10px;
        /*padding-right:25px;*/
        display: flex;
        align-items: center;
        /*border-bottom: 1px solid #eee;*/
        height: 30%;

    }
    .modalDlg_top>img{
        width:80px;
        height: 80px;
    }
    .modalDlg_top_right{
        margin-left:20px;
        width:calc(100% - 100px);
    }
    .modalDlg_top_right_name{
        display: flex;
        align-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;//向显示多少行就给多大值
        -webkit-box-orient: vertical;
        color: #787777;
        font-size: 26rpx;
        span{
            @include ellipsis(3)
        }
    }
    .modalDlg_top_right_name_tag{
        color:purple;
        display: inline-block;
        width:50px;
        text-align: center;
        border:1px solid purple;
        font-size: 10px;
        border-radius: 5px;
        margin-right:5px;
    }
    .modalDlg_top_right_name_tag+span{
        width:200px;
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .modalDlo_bottom{
        margin-left:10px;
    }
    .cart_price{
        margin-top:15px;
        display: flex;
        justify-content: space-between;
        align-items: center
    }
    .cart_price>span:nth-child(1){
        color:red;
    }
    .modalDlo_center{
        max-height: 50%;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
        width:100%;
        /*max-height: 45%;*/
    }
    .modalDlo_center_classify{
        display:flex;
        align-items: center;
        flex-wrap:wrap;
        margin:10px;
        /*padding-bottom: 50px;*/
    }
    .modalDlo_center_classify>div{
        border:1px solid #eee;
        padding:2.5px 5px;
        border-radius: 5px;
        margin-right:5px;
        margin-top: 5px;
        font-size: 26rpx;
        color: #787777;
        text-align: center;
    }
    .modalDlo_center_tit{
        padding-left:10px;
    }
    .join_cart{
        width:100%;
        background: rgb(196, 75, 75);
        color:#fff;
        font-size: 20px;
        text-align: center;
        line-height: 40px;
        position: absolute;
        bottom:0;
    }
    button::after {
        border: none;
    }
    button {
        background-color: #fff;
        line-height: 16px;
        font-size: 10px;
        border-radius:0;
    }
    /* 规格 */
    .selectClassify{
        border:red 1px solid !important;
        color:red;
    }

    .back{
        background: #ffffff;
    }

    .bottom{
        padding: 30rpx;
        text-align: center;
        color: #999999;
        background: #ffffff;
    }

    /*广告区域*/
    .column{
        height: 400upx;
        width: 94%;
        overflow: hidden;
        margin: 0 3%;
        margin-top: 15upx;
        background-color: white;
        border-radius: 20rpx;
    }
    .column_left{
        height: 100%;
        width: 40%;
        float: left;
        border: 1px solid #f3f2f2;
        .left_img{
            width: 100%;
            height: 400rpx;
            display: block;
        }
    }
    .colum_right{
        float: right;
        width: 58%;
        border: 1px solid #f3f2f2;
        .right_img{
            width: 100%;
            height: 196upx;
            display: block;
        }
    }
</style>
